<template>
  <div class="forgetPassword">
    <el-card style="width: 60%">
      <h2>Forget Password</h2>
      <el-form>
        <el-form-item>
          <el-input
            placeholder="输入新密码"
            type="password"
            v-model="forgetPassword.password"
            @input="checkPassword"
          >
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            <i
              slot="suffix"
              style="color: #f56c6c"
              class="el-input__icon el-icon-circle-close"
              v-show="isVaildPassword != null && !isVaildPassword"
            ></i>
            <i
              slot="suffix"
              style="color: #67c23a"
              class="el-input__icon el-icon-circle-check"
              v-show="isVaildPassword != null && isVaildPassword"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input type="password" placeholder="确认新密码" v-model="compirePassword">
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            <i
              slot="suffix"
              style="color: #f56c6c"
              class="el-input__icon el-icon-circle-close"
              v-show="
                forgetPassword.password != compirePassword &&
                forgetPassword.password != null &&
                forgetPassword.password != ''
              "
            ></i>
            <i
              slot="suffix"
              style="color: #67c23a"
              class="el-input__icon el-icon-circle-check"
              v-show="
                forgetPassword.password == compirePassword &&
                forgetPassword.password != null &&
                forgetPassword.password != ''
              "
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="邮箱随机码" v-model="forgetPassword.uuid">
              <i slot="prefix" class="el-input__icon el-icon-check"></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForgetPassword" round
            >确认提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import * as util from "@/js/util";
import * as api from "@/js/api";
export default {
  name: "forgetPassword",
  data() {
    return {
      forgetPassword: {},
      compirePassword: "",
      isVaildPassword: null,
    };
  },
  methods: {
    submitForgetPassword() {
        if(!util.checkPassword(this.forgetPassword.password)||this.compirePassword.trim()==""||(this.forgetPassword.password!=this.compirePassword)){
            this.$message({
                type:'error',
                message:"密码格式有误，请检查(至少包含英文字母和数字且6位以上)"
            })
            return;
        }
        if(this.forgetPassword.uuid==null||this.forgetPassword.uuid.trim()==""){
            this.$message({
                type:'error',
                message:"验证码不能为空"
            })
            return;
        }
        api.verForgetPassword(this.forgetPassword).then(res=>{
            this.$message({
                type: res.status?'success':'error',
                message: res.message
            })
            if(res.status){
                console.log("找回成功");
                this.$router.push("/login");
            }
        })

    },
    checkPassword() {
      this.isVaildPassword = util.checkPassword(this.forgetPassword.password);
    },
    getUrlParam() {
      if(this.$route.query.token==null||this.$route.query.token.trim()==""){
          this.$router.push("/login");
          return;
      }
      this.forgetPassword.verCode=this.$route.query.token;
    },
  },
  mounted() {
    this.getUrlParam();
  },
};
</script>
<style scoped>
.forgetPassword {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>